﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>都优乐运营统计后台</title>
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css"> 
</head>

<body>
    <div id="wrapper">
    	<!--/. 顶部导航-->
        <nav class="navbar navbar-default top-navbar" role="navigation">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html"><strong>都优乐运营后台</strong></a>
				
				<div id="sideNav" href=""><i class="fa fa-caret-right"></i></div>
            </div>            
        </nav>
        
        <!--/. 侧边栏导航  -->
        <nav class="navbar-default navbar-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="main-menu">

                    <li>
                        <a class="active-menu" href="index.html"><i class="fa fa-dashboard"></i> 全国运营数据</a>
                    </li>
                    <li>
                        <a href="各省运营数据.html"><i class="fa fa-desktop"></i> 各省运营数据</a>
                    </li>
					<li>
                        <a href="各市运营数据.html"><i class="fa fa-bar-chart-o"></i>各市运营数据</a>
                    </li>
                    <li>
                        <a href="各区运营数据.html"><i class="fa fa-qrcode"></i> 各区运营数据</a>
                    </li>
                    
                    <li>
                        <a href="各镇运营数据.html"><i class="fa fa-table"></i> 各镇运营数据</a>
                    </li>                   
                   
                </ul>

            </div>

        </nav>
        <!-- 大标题  -->      
		<div id="page-wrapper">
		  <div class="header"> 
               <h1 class="page-header">
                   	全国运营数据
                   	<small>Welcome ！</small>
               </h1>
               <ol class="breadcrumb">
                   <li><a href="#">首页</a></li>
				   <li class="active">数据</li>
               </ol> 								
		</div>
            
<!--除开导航的主容器-->
<div id="page-inner">

    <!--  数据百分比显示  -->
		<div class="row">
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>全国营业额</h4>
						<div class="easypiechart" id="easypiechart-blue" data-percent="82" ><span class="percent">82%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>全国提现</h4>
						<div class="easypiechart" id="easypiechart-orange" data-percent="55" ><span class="percent">55%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>全国还款总额</h4>
						<div class="easypiechart" id="easypiechart-teal" data-percent="84" ><span class="percent">84%</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="panel panel-default">
					<div class="panel-body easypiechart-panel">
						<h4>全国逾期总额</h4>
						<div class="easypiechart" id="easypiechart-red" data-percent="46" ><span class="percent">46%</span>
						</div>
					</div>
				</div>
			</div>
		</div>
			
    <!--数据总金额显示-->
                <div class="row">
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-primary text-center no-boder blue">
                            <div class="panel-left pull-left blue">
                                <i class="fa fa-rmb fa-5x"></i>
                            </div>
                            <div class="panel-right">
								<h3>16,150</h3>
                               <strong> 全国营业额</strong>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-primary text-center no-boder blue">
                              <div class="panel-left pull-left blue">
                                <i class="fa fa-dollar fa-5x"></i>
								</div>
                                
                            <div class="panel-right">
							<h3>25,550 </h3>
                               <strong> 全国提现</strong>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-primary text-center no-boder blue">
                            <div class="panel-left pull-left blue">
                                <i class="fa fa fa-eur fa-5x"></i>
                               
                            </div>
                            <div class="panel-right">
							 <h3>11,225 </h3>
                               <strong> 全国还款总额 </strong>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-12 col-xs-12">
                        <div class="panel panel-primary text-center no-boder blue">
                            <div class="panel-left pull-left blue">
                                <i class="fa fa-btc fa-5x"></i>
                                
                            </div>
                            <div class="panel-right">
							<h3>72,525 </h3>
                             <strong>全国逾期总额</strong>

                            </div>
                        </div>
                    </div>
                </div>
				
<!--统计图形总容器-->
            <div class="row">
            <!-- V级别总人数折线图形-->
				<div class="col-md-12 col-sm-12 col-xs-12">
					<div class="panel panel-default">										
						<div id="chartmain"  style="width:100%; height: 400px;"></div>
					</div>   
				</div>		
			</div>	
			<!--营业额及提现图形-->
                <div class="row">
                    <div class="col-md-12 col-sm-12 col-xs-12">  
                    	<div class="panel panel-default">	
							<div id="money"  style="width:100%; height: 400px;"></div>
						</div> 
                    </div>
                </div>
            
			
			<!--分红数据表-->	
                <div class="row">
                   
                    <div class="col-md-12 col-sm-12 col-xs-12">

                        <div class="panel panel-default">
                            <div class="panel-heading">
                                                                                                全国分红数据
                            </div> 
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered table-hover">
                                        <thead>
                                            <tr>
                                                <th>地区</th>
                                                <th>代理总分红</th>
                                                <th>消费总分红</th>
                                                <th width="20%">除四川外的EVA营业额20%分红</th>
                                                <th>全球分红</th>
                                                <th>其他分红</th>
                                                <th width="15%">每月8日可提到账户余额</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>全国</td>
                                                <td>527000</td>
                                                <td>527000</td>
                                                <td>527000</td>
                                                <td>527000</td>
                                                <td>527000</td>
                                                <td>527000</td>
                                            </tr>
                                            
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>			
           </div>          
       </div>       
    </div>
   
    <!-- JS Scripts-->
    <!-- jQuery Js -->
    <script src="assets/js/jquery-1.10.2.js"></script>
    <!-- Bootstrap Js -->
    <script src="assets/js/bootstrap.min.js"></script>
	 
    <!-- Metis Menu Js -->
    <script src="assets/js/jquery.metisMenu.js"></script>
    <!-- Morris Chart Js -->
    <script src="assets/js/morris/raphael-2.1.0.min.js"></script>
    <script src="assets/js/morris/morris.js"></script>
	
	
	<script src="assets/js/easypiechart.js"></script>
	<script src="assets/js/easypiechart-data.js"></script>
	
	 <script src="assets/js/Lightweight-Chart/jquery.chart.js"></script>
	
    <!-- Custom Js -->
    <script src="assets/js/custom-scripts.js"></script>

	<!--统计数据图形Js-->
    <script src="assets/js/echarts.common.min.js"></script>
	<script>
	//表1：总人数表数据
        var option = {
            title:{
                text:'全国V1 --- 	V8统计人数'
            },
            tooltip:{},
            legend:{
                data:['用户来源']
            },
			//x轴数据信息
            xAxis:{
                data:["V1","V2","V3","V4","V5","V6","V7","V8"]
            },
            //y轴数据信息
            yAxis:{
				type:'value',
				axisLabel:{
					 formatter: function(value){ 
				         return value * 10;   //y轴的数据值
				     } 
				}
				
            },
            series:[{
                name:'人数',
				barMaxWidth:50,	//设置柱状最大的宽度
                type:'bar',  	//type:图形形状；bar:柱状,line:折线
                data:[5000,2000,3600,2000,2800,3600,2000,2800]    //data:真实数据
            }]
        };
        //总人数图表----初始化
        var myChart = echarts.init(document.getElementById('chartmain'));
		
				
        //使用制定的配置项和数据显示图表
        myChart.setOption(option);
       
        
        

     
     
     
//表2：   提现营业额表数据
        var option2 = {
        	
        	
        	
        	color: ['#F09B22', '#1ebfae'],
            title:{
                text:'全国EVA产品和一般产品营业额及提现'
            },
             tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'shadow'
		        }
		    },
		    //小图标
           legend: {
		        left: 'left',
		        data: ['2的指数', '3的指数']
		    },
		    
			//x轴数据信息
            xAxis:{
                data:["营业额","提现","放贷","逾期","还款"]
            },
            //y轴数据信息
            yAxis:{
				type:'value',
				axisLabel:{
					 formatter: function(value){ 
				         return value * 100;   
				     } 
				}				
            },
            series:[
            {
                name:'EVA',
				barMaxWidth:50,	//设置柱状最大的宽度
                type:'bar',  	//type:图形形状；bar:柱状,line:折线
                data:[900000,700000,600000,270000,780000]    //data:真实数据
            },
            {
            	name:'一般产品',
				barMaxWidth:50,	
                type:'bar',  	
                data:[400000,500000,400000,895000,690000]    
            }
            
            ]
        };
        
        var money = echarts.init(document.getElementById('money'));
         money.setOption(option2);
         
         
         
        //窗口大小==图表大小（设置响应式）

        window.addEventListener('resize', function () { 
          myChart.resize(); 
          money.resize(); 
          money2.resize();
     });
	</script>
</body>

</html>